<template>
	<!--  移动端 我的  界面 -->
	<view class="page">
		<view style="height: 170px;" class="my-top">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
				<view class="portrait">
					<image v-show="scrollTop>20"
						src="//img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png">
					</image>
				</view>
				<view class="title">
					<text v-show="scrollTop>20">我的</text>
				</view>
				<view style="margin-top: 40px;" class="setting-mess">
					<view class="setting" @click="onSetting">
						<text class="iconfont icon-setting" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
					<view class="mess" @click="onMessage">
						<text class="iconfont icon-xiaoxi" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="user-info" style="display: none">
				<view class="portrait">
					<image src="http://img2.imgtn.bdimg.com/it/u=1039075865,3371165857&fm=26&gp=0.jpg"></image>
				</view>
				<view class="info">
					<view class="nickname">
					</view>
					<view class="rank">
						<image src="/static/rank.png"></image>
						<text>v1</text>
					</view>
				</view>
			</view>
			<view class="user-info">
				<view class="portrait">
					<image :src="avatarUrl"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{nickName}}</text>
					</view>
				</view>
			</view>
			<!-- 关注区 -->
			<!-- <view class="focus-area">
				<view class="list" @click="onCollect('goods')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>商品关注</text>
					</view>
				</view>
				<view class="list" @click="onCollect('content')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>喜欢的内容</text>
					</view>
				</view>
				<view class="list" @click="onCollect('record')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>浏览记录</text>
					</view>
				</view>
			</view> -->
			<!-- 会员 -->
			<!-- 		<view class="vip-info" @click="onMmeberVip">
				<view class="vip">
					<text>超级会员</text>
					<text class="line"></text>
				</view>
				<view class="vip-explain">
					<text>超级会员一年预计可省99元</text>
				</view>
				<view class="vip-btn">
					<text>立即查看</text>
				</view>
			</view> -->
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="list" @click="onSkipOrder(0)">
				<view class="icon">
					<text class="iconfont icon-daifukuan"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>全部</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(1)">
				<view class="icon">
					<text class="iconfont icon-daifahuo"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待付款</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(2)">
				<view class="icon">
					<text class="iconfont icon-daishouhuo"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待收货</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(3)">
				<view class="icon">
					<text class="iconfont icon-daipingjia"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>已取消订单</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(4)">
				<view class="icon">
					<text class="iconfont icon-daipingjia"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待评价</text>
				</view>
			</view>
			<!-- <view class="list" @click="onSkipOrder(5)">
				<view class="icon">
					<text class="iconfont icon-tuikuan"></text>
					<text class="num">22</text>
				</view>
				<view class="title">
					<text>退换</text>
				</view>
			</view> -->
		</view>
		<!-- 钱包 -->
		<view class="wallet-info">
			<view class="list" @click="onWallet('integral')">
				<view class="icon">
					<text class="number">140</text>
				</view>
				<view class="title">
					<text>积分</text>
				</view>
			</view>
			<view class="list" @click="onWallet('coupon')">
				<view class="icon">
					<image style="width: 30px; height: 20px;" src="../../static/优惠券.png"></image>
				</view>
				<view class="title">
					<text>优惠券</text>
				</view>
			</view>
			<!-- 		<view class="list" @click="onWallet('wallet')">
				<view class="icon">
					<text class="number">200.00</text>
				</view>
				<view class="title">
					<text>余额</text>
				</view>
			</view>
			<view class="list">
				<view class="icon">
					<text class="iconfont icon-qianbao"></text>
				</view>
				<view class="title">
					<text class="action">我的钱包</text>
				</view>
			</view> -->
		</view>
		<!-- 积分，付款码 -->
		<!-- 	<view class="integral-payment">
			<view class="list" @click="onWallet('SignIn')">
				<view class="title">
					<text class="iconfont icon-qiandao" style="font-weight: bold;"></text>
					<text>签到</text>
				</view>
				<view class="mess">
					<text>每日签到 领取积分</text>
				</view>
			</view>
			<view class="list" @click="onWallet('payment')">
				<view class="title">
					<text class="iconfont icon-fukuanma"></text>
					<text>付款码</text>
				</view>
				<view class="mess">
					<text>到店扫码 快捷支付</text>
				</view>
			</view>
		</view> -->
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text>我的服务</text>
			</view>
			<view class="service-list">
				<!-- 				<view class="list" @click="onServer('feedback')">
					<view class="thumb">
						<image src="/static/yjfk.png"></image>
					</view>
					<view class="name">
						<text>意见反馈</text>
					</view>
				</view> -->
				<view class="list" @click="onServer('serve')">
					<view class="thumb">
						<image src="/static/kfrx.png"></image>
					</view>
					<view class="name">
						<text>客服热线</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 为你推荐 -->
		<view class="recommend-info">
			<view class="recommend-title">
				<view class="title">
					<image src="/static/wntj_title.png" mode=""></image>
				</view>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods',item.goodsId,item.goodsPrice,item.activityPrice,item.test,item.goodsInfo,item.num,item.img,item.goodsName)" :key="index">
					<view class="pictrue">
						<image :src="ip+item.img" mode="heightFix"></image>
					</view>
					
					<view class="title-tag">
						<view class="tag">
							<text v-if="item.offer === 15">特价</text>
							{{item.goodsName}}
						</view>
					</view>
					<view class="price-info">
						<view class="user-price">
							<text class="min">￥</text>
							<text class="max">{{item.goodsPrice}}</text>
						</view>
						<view class="vip-price">
							<!-- <image src="/static/vip_ico.png"></image> -->
							<text>￥{{item.activityPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 客服热线 -->
		<view class="serve-hotline" @click="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
				<view class="cu-dialog">
					<view class="contact-list">
						<view class="list">
							<text>呼叫客服</text>
						</view>
						<view class="list">
							<text style="color: #959595;">400-800-900</text>
						</view>
						<view class="list">
							<text>取消</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="4"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import {baseUrl} from "../../config/baseUrl.js"
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				tblCoupons:[],
				nowTime:'',
				avatarUrl:'',
				nickName: '',
				userInfo: {},
				ip:"http://43.142.173.112:9090/images/",
				scrollTop: 0,
				isHotline: false,
				goodsList: [],
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.nickName =uni.getStorageSync("nickName")
			this.avatarUrl =uni.getStorageSync("avatarUrl")
			console.log(this.userInfo)
			this.getData()
		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//获取首页数据
			getData() {
				uni.request({
					url: baseUrl + "/index/recommend",
					method: 'POST',
					data: {
						shopsId: uni.getStorageSync("shopsId"),
						userId: 1,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log("我的为你推荐",res.data.goodsList)
						this.goodsList = res.data.goodsList
						
					}
				})
			},
			/* 获取当前时间 */
			getNowTime(){
				var datetime = new Date();
				var year = datetime.getFullYear();
				var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
				var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();			 
				this.nowTime = year + "-" + month + "-" + date;
			},
					
			/**
			 * 关注跳转
			 */
			onCollect(type) {
				switch (type) {
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsOn/GoodsOn'
						})
						break;
					case 'content':
						uni.navigateTo({
							url: '/pages/ContentCollection/ContentCollection'
						})
						break;
				}
			},
			/**
			 * 订单
			 */
			onSkipOrder(type) {
				uni.navigateTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
			},
			/**
			 * 钱包跳转点击
			 */
			onWallet(type) {
				switch (type) {
					case 'integral':
						uni.navigateTo({
							url: '/pages/IntegralDetails/IntegralDetails',
						})
						break;
					case 'coupon':
						this.getNowTime(),
						console.log("所在地的分店ID",uni.getStorageSync("shopsId"))
							uni.request({
								url:baseUrl+"/user/noGetCoupon",
								method:'POST',
								header:{"Content-Type": "application/x-www-form-urlencoded",
								},
								data:{
									shopsId:uni.getStorageSync("shopsId"),

								},
								success:(res)=>{
									if(res.data.tblCoupons==null){
									 console.log("请先去填写地址，该地区暂无分店和优惠券！")
										 uni.setStorageSync("newCoupons",null)
									}else{
									console.log("获取的新优惠券:",res.data.tblCoupons)
									this.tblCoupons.length=0;
									for(var i=0;i<res.data.tblCoupons.length;i++){						
										let result = Date.parse(res.data.tblCoupons[i].getTime.trim().replace(/-/g, '/')) > Date.parse(this.nowTime.trim().replace(/-/g, '/'));										 
										if(result) { 
											this.tblCoupons.push(res.data.tblCoupons[i])
											}else {
											console.log(res.data.tblCoupons[i].getTime+"小于"+this.nowTime) 
										}																													
				
									}
									console.log("优惠券列表",this.tblCoupons)
									
									/* 判断优惠券是否过期 */
									console.log("当前时间",this.nowTime)													
									uni.setStorageSync("newCoupons",this.tblCoupons)								
									}
									uni.navigateTo({
										url:'/pages/MyCoupon/MyCoupon'
									})
								}								
							})
						break;
					case 'wallet':
						uni.navigateTo({
							url: '/pages/MyWallet/MyWallet',
						})
						break;
					case 'SignIn':
						uni.navigateTo({
							url: '/pages/SignIn/SignIn',
						})
						break;
					case 'payment':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode',
						})
						break;
				}
			},
			/**
			 * 我的服务点击
			 */
			onServer(type) {
				switch (type) {
					case 'feedback':
						uni.navigateTo({
							url: '/pages/Feedback/Feedback'
						})
						break;
					case 'serve':
						this.isHotline = true;
						break;
				}
			},
			/**
			 * 设置点击
			 */
			onSetting() {
				uni.navigateTo({
					url: '/pages/Setting/Setting'
				})
			},
			/**
			 * 消息点击
			 */
			onMessage() {
				uni.navigateTo({
					url: '/pages/Message/Message'
				})
			},
			/**
			 * 会员点击
			 */
			onMmeberVip() {
				uni.navigateTo({
					url: '/pages/MembersOpened/MembersOpened',
				})
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type,goodsId,goodsPrice,activityPrice,test,goodsInfo,num,img,goodsName) {
				switch (type) {
					case 'goods':
					uni.navigateTo({
						url: '/pages/GoodsDetails/GoodsDetails?goodsId='+goodsId+'&goodsPrice='+goodsPrice+'&activityPrice='+activityPrice+'&test='+test+'&goodsInfo='+goodsInfo+'&num='+num+'&img='+img+'&goodsName='+goodsName,
						animationType: 'zoom-fade-out',
						animationDuration: 200,
							
					})
						break;
				}
			},
			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			// onUserInfo() {
			// 	if (this.isLogin) {
			// 	} else {
			//  	uni.navigateTo({
			// 				url: '/pages/login/login'
			// 		})
			// 		}			
			// }
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';
</style>
